<template>
  <div class="banking">
      <div class="land">
        <div class="banner">
          <div class="left">
            <h1>
              <!-- Frontrock Banking -->
            </h1>
            <div class="brief">
              FrontRock Banking allows customers to earn a much higher yield of return where conventional banks would never be able to top with. With the state of art decentralized platform, Frontrock allows easy access to staking and borrowing funds.
            </div>
            <div class="buttons videos">
              <a @click="gotoBanking()" href="javascript:;" class="start">Get started</a>
              <!-- <a v-show="false" href="javascript:;" class="know-more">Know more</a> -->
            </div>
          </div>
          <div class="video">
              <div class="play"></div>
          </div>
        </div>

        <!-- <h1>
          Frontrock Banking
        </h1>
        <div class="brief">
          FrontRock Banking allows customers to earn a much higher yield of return where conventional banks would never be able to top with. With the state of art decentralized platform, Frontrock allows easy access to staking and borrowing funds.
        </div> -->

        <!-- <div class="contain">
            <div class="cloud">
                <div class="video">
                    <div class="play"></div>
                </div>
            </div>
        </div> -->

        <div class="land_page2_bg">
          <div class="info">
            <p class="t">Profitability</p>
            <p class="cont">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
            <p class="t small">Your cryptos will be kept safe</p>
            <p class="cont small">All of the deposited crypto will be hold in a custodian third party multi-sig wallet to ensure security.</p>
            <div class="buttons">
              <a href="javascript:;" class="start">Get started</a>
              <!-- <a href="javascript:;" class="know-more">Know more</a> -->
            </div>
          </div>
          <div class="mist"></div>
        </div>

        <div class="land_page3_bg">
          <div class="computer"></div>
          <div class="info">
            <p class="t">Simplicity</p>
            <p class="cont">Use your cryptos as collateral to borrow.</p>
            <ul>
                <li>
                  <i class="el-icon-check"></i>
                  Instant fund access</li>
                <li>
                  <i class="el-icon-check"></i>
                  Friendly User Interface</li>
                <li>
                  <i class="el-icon-check"></i>
                  Low collateral</li>
            </ul>
            <div class="buttons">
              <a href="javascript:;" class="start">Get started</a>
              <!-- <a href="javascript:;" class="know-more" @click="routePath(8)">Know more</a> -->
            </div>
          </div>
        </div>

        <div class="land_page4_bg">
          <div class="info">
            <p class="t">Autonomous</p>
            <p class="cont">FRK token holders govern the Frontrcok ecosystem through submitting and voting proposals. Proposals that have more than 50% of the vote are implemented and added to the existing ecosystem.</p>
            <div class="buttons">
              <a href="javascript:;" class="start">Get started</a>
              <!-- <a href="javascript:;" class="know-more">Know more</a> -->
            </div>
          </div>
          <!-- <div class="computer"></div> -->
          <!-- <div class="arrow"></div> -->
        </div>

        <div class="land_page5_bg">
          <div class="arrow"></div>
          <div class="arrow a1"></div>
          <div class="arrow a2"></div>
          <div class="whatis">
            <p class="title">Ready to use your FRK?
            </p>
            <p class="cont">
              Trade property tokens with FRK on the Frontrock DEX.
            </p>
            <div class="land5_sub">
              <tokens-card></tokens-card>
            </div>

            <div class="buttons">
              <a href="javascript:;" class="start">Start trading</a>
              <a @click="routePath(3)" href="javascript:;" class="know-more">Know more</a>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
  import tokensCard from './tokensCard'
  export default {
    data() {
      return {
      }
    },
    components: {
      tokensCard
    },
    mounted() {
        console.log('banking:', this)
    },
    methods: {
      routePath(i) {
        Bus.$emit('topbar', i)
      },
      salesBuy() {
        console.log(Date());
      },
      gotoBanking(){
        console.log(arguments)
      }
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .banking {
    position: relative;
    text-align: center;
    // min-height: 400px;
    // max-width: 840px;
    // margin: 50px auto 0 auto;
    color: #fff;
    .land{
      font-family: Newsreader, serif;
      width: 100%;
      display: inline-block;
      .banner{
        padding-bottom: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        @media screen and (max-width: 720px) {
          flex-direction: column;
        }
        .left{
          width: 30%;
          text-align: left;
          h1{
            font-size: 36px;
            font-family: "Krona One", monospace;
            font-weight: 900;
            line-height: 52px;
            background: url(../assets/logo_banking.png) no-repeat;
            background-size: auto 100%;
            width: 400px;
            height: 70px;
            margin: 0 0 33px 0;
          }
          @media screen and (max-width: 640px) {
            width: 90%;
            text-align: center;
            h1{
              font-size: 28px;
              line-height: 36px;
              width: 93%;
              display: inline-block;
              margin: 70px 0 33px 0;
            }
          }
          .brief{
            font-size: 18px;
            display: inline-block;
            line-height: 22px;
            letter-spacing: 1px;
            width: 90%;
              @media screen and (max-width: 720px) {
                width: 90%;
              }
          }
          .buttons{
            padding: 20px 0 0 0;
            a{
              width: 240px;
              text-align: center;
            }
          }
        }
        .video{
          background: url(../assets/market_video.jpeg);
          background-size: 100% auto;
          width: 536px;
          height: 358px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          // margin: 64px 0 0 0;
          border-radius: 48px;
          //   flex-direction: row;
          position: relative;
          .play{
              background: url(../assets/video_play.png);
              background-size: 100% auto;
              width:97px;
              height:97px;
              cursor: pointer;
          }
          &:after{
            // content: '';
            position: absolute;
            left: 100px;
            right: 100px;
            bottom: -100px;
            height: 1px;
            background: #fff;
          }
          @media screen and (max-width: 540px) {
            width: 300px;
            height: 200px;
            border-radius: 20px;
            .play{
              transform: scale(.7);
            }
          }
        }
      }
      // h1{
      //   font-size: 48px;
      //   font-weight: 900;
      //   line-height: 52px;
      // }
      // .brief{
      //   width: 584px;
      //   font-size: 18px;
      //   display: inline-block;
      //   line-height: 22px;
      //     @media screen and (max-width: 720px) {
      //       width: 90%;
      //     }
      // }
      // .contain{
      //   position: relative;
      //   height: 660px;
      //     @media screen and (max-width: 720px) {
      //       height: 360px;
      //     }
      //     .cloud{
      //         background: url(../assets/land2_cloud.png) no-repeat;
      //         background-size: 80% auto;
      //         background-position: center 50%;
      //           position: absolute;
      //           left: 0;
      //           top: -30px;
      //           right: 0;
      //           bottom: 0;
      //           z-index: 0;
      //     @media screen and (max-width: 720px) {
      //       left: -50px;
      //       right: -50px;
      //     }
      //     }
      //     .video{
      //         background: url(../assets/market_video.jpeg);
      //         background-size: 100% auto;
      //         width: 536px;
      //         height: 358px;
      //         display: inline-flex;
      //         align-items: center;
      //         justify-content: center;
      //         margin: 7% 0 0 0;
      //         border-radius: 48px;
      //         z-index: 11;
      //     @media screen and (max-width: 720px) {
      //       margin: 50px 0 0 0;
      //     }
      //       //   flex-direction: row;
      //         .play{
      //             background: url(../assets/video_play.png);
      //             background-size: 100% auto;
      //             width:97px;
      //             height:97px;
      //             cursor: pointer;
      //         }
      //         @media screen and (max-width: 720px) {
      //           width: 300px;
      //           height: 200px;
      //           border-radius: 20px;
      //           .play{
      //             transform: scale(.7);
      //           }
      //         }
      //     }
      // }
      .whatis{
        // border: 1px dashed white;
        // border-radius: 100px;
        border-top: 2px solid white;
        margin: 19% 0 50px 0;
        color:#F6F5F5;
        padding: 50px;
        display: inline-block;
        p{
          margin: 0;
        }
        .title{
          font-size: 42px;
          line-height: 42px;
        }
        .cont{
          width: 80%;
          display: inline-block;
          margin: 40px 0 64px 0;
        }
      }

      .bg-key{
        position: relative;
            background-image: url(../assets/land2_cloud.png);
            background-size: 100% auto;
            width: 100%;
            min-height: 660px;
            .land2_cloud{
            }
        .l, .r{
          position: absolute;
          width: 43%;
          height: 350px;
          background-size: 100% auto;
          background-repeat: no-repeat;
          &.l{
            background-image: url(../assets/key_l.png);
            left: 270px;
            top: 240px;
          }
          &.r{
            background-image: url(../assets/key_r.png);
            right: 310px;
            top: -50px;
            width: 29%;
          }
        }
      }

      .land_page2_bg{
        background: #fff;
        height: 600px;
        margin-top: 30px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        justify-content: center;
        color: #070f4e;
          @media screen and (max-width: 720px) {
            flex-direction: column-reverse;
          }
        .info{
          // width: 363px;
          width: 30%;
          text-align: left;
          padding: 20px 0px;
          line-height: 48px;
              @media screen and (max-width: 720px) {
                width: auto;
                padding: 0 20px;
                line-height: 20px;
              }
          .t{
            font-size: 48px;
            font-weight: 900;
            &.small{
                font-size: 16px;
                font-family: "Krona One", monospace;
                margin-bottom: 5px;
            }
          }
          .cont{
            line-height: 26px;
            margin: 28px 0 0 0;
            &.small{
                font-size: 13px;
                margin: 0 0 0 0;
                line-height: 13px;
            }
          }
          .buttons{
            display: none;
            padding: 40px 0;
            white-space: nowrap;
            a{
              // width: 200px;
              width: 60%;
              text-align: center;
              margin: 0;
              @media screen and (max-width: 720px) {
                width: 100%;
              }
              &.know-more{
                border-color: #EF6566;
                color: #EF6566;
                &:hover{
                  // border-color:transparent;
                  // color: #fff;
                }
              }
            }
          }
        }
        .mist{
          background: url(../assets/land3_Profit.png),#fff;
          background-size: 108% auto;
          background-position: right center;
          background-repeat: no-repeat;
          width:50%;
          height: 600px;
              @media screen and (max-width: 720px) {
                width: 100%;
              }
        }
      }

      .land_page3_bg{
        background: white;
        height: 600px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        // flex-direction: row;
        color: #070F4E;
              @media screen and (max-width: 720px) {
                padding-top: 50px;
                flex-direction: column;
              }
        ul{
            font-family: "Krona One", monospace;
            line-height: 45px;
            padding: 0;
            li{
              list-style: none;
              .el-icon-check{
                color: #fff;
                background: #FBB627;
                border-radius: 12px;
                width: 28px;
                height: 28px;
                font-size: 20px;
                line-height: 28px;
                text-align: center;
                margin-right: 18px;
              }
            }
        }
        .mountain{
          background: url(../assets/land2_estate_mountain.png) no-repeat;
          background-size: auto 100%;
          width: 600px;
          height: 520px;
          margin: -50px 30px 0 30px;
        }
        .computer{
          background: url(../assets/land_page3_bg.png) no-repeat;
          background-size: auto 100%;
          width: 600px;
          height: 320px;
          margin: 0 0 0 30px;
              @media screen and (max-width: 720px) {
                background-size: 100% auto;
              width: 80%;
              margin: 0px 0 0;
              height: 185px;
              }
        }
        .info{
          // width: 363px;
          width: 40%;
          text-align: left;
          padding: 20px 0px;
          line-height: 48px;
          @media screen and (max-width: 720px) {
                width: 90%;
              }
          .t{
            font-size: 45px;
            font-weight: 900;
            margin: 0;
          }
          .cont{
            line-height: 26px;
            margin: 23px 0 0 0;
          }
          .buttons{
            display: none;
            text-align: left;
            padding: 40px 0;
            white-space: nowrap;
            a{
                text-align: center;
              // width: 200px;
              width: 45%;
              margin: 0;
              @media screen and (max-width: 640px) {
                width: 100%;
              }
              &.know-more{
                border-color: #EF6566;
                color: #EF6566;
                &:hover{
                  // border-color:transparent;
                  // color: #fff;
                }
              }
            }
          }
        }
      }

      .land_page4_bg{
        // background: white;
        // height: 800px;
        // display: flex;
        // align-items: center;
        // flex-direction: row;
        // color: #070F4E;
        color: #fff;
        position: relative;
        padding: 50px 0 30px 0;
        text-align: center;
        .arrow{
          position: absolute;
          background: url(../assets/land_page4_arrow.png) no-repeat;
          background-size: 100% auto;
          width: 180px;
          height: 150px;
          bottom: 80px;
          right: 585px;
        }
        .info{
          width: 42%;
          padding: 20px 0px 20px 0%;
          text-align: left;
          line-height: 48px;
          display: inline-block;
          @media screen and (max-width: 720px) {
            width:90%;
            padding: 20px 0; 
          }
          .t{
            font-size: 56px;
            font-weight: 900;
            // margin: 0 0 0 -200px;
            @media screen and (max-width: 720px) {
              font-size: 36px;
              text-align: left;
              margin: 0;
            }
          }
          .cont{
            // line-height: 26px;
            line-height: 6vh;
            margin: 23px 0 0 0;
            // width: 495px;
            display: inline-block;
            text-align: left;
            font-size: 22px;
            @media screen and (max-width: 720px) {
              font-size: 18px;
              line-height: 26px;
            }
          }
          .buttons{
            text-align: left;
            padding: 40px 0;
            white-space: nowrap;
            @media screen and (max-width: 720px) {
              text-align: left;
            }
            a{
              // width: 200px;
              width: 45%;
              // margin: 0 0 0 -200px;
              text-align: center;
            @media screen and (max-width: 640px) {
              width: 100%;
              margin:0;
                text-align: center;
            }
              &.start{
                background: transparent;
                color:#FBB627;
                border-color: #FBB627;
                &:hover{
                  background-color: rgba(251, 182, 39, .1);
                }
              }
            }
          }
        }
        .computer{
          background: url(../assets/land_page3_bg.png) no-repeat;
          background-size: auto 100%;
          width: 550px;
          height: 310px;
          margin: 0 30px 0 0px;
        }
      }

      .land_page5_bg{
        background: white;
        color: #070F4E;
        position: relative;
        // border-radius: 118px;
        // max-width: 1094px;
        // margin-bottom: 150px;
        .arrow{
          position: absolute;
          background:url(../assets/key_r.png) no-repeat;
          background-size: 100% auto;
          width: 200px;
          height: 200px;
          right: -15px;
          top: 72px;
          transform: rotateZ(-20deg) scale(.8);
            @media screen and (max-width: 720px) {
              right: -95px;
            }
          &.a1{
            top: -15px;
            left: 180px;
            transform: rotateX(-10deg) rotateZ(20deg) rotateY(165deg) scale(0.6);
            @media screen and (max-width: 720px) {
              left: -85px;
            }
          }
          &.a2{
            top: 662px;
            left: 20px;
            transform: rotateX(-10deg) rotateZ(-7deg) rotateY(190deg) scale(0.9);
          }
        }
        .whatis{
          color: #070F4E;
          color: inherit;
          width: auto;
          max-width: initial;
          margin: 1% 0 0px 0;
          border:none;
            @media screen and (max-width: 720px) {
              padding: 50px 0;
            }
          .title{
            font-weight: 900;
          }
          .cont{
            color: #20336B;
            font-size: 18px;
            line-height: 18px;
            margin: 30px 0 50px 0;
          }
          .land5_sub{
            max-width: 800px;
          }
          .buttons{
            padding: 40px 0 0 0;
            width: 50%;
            display: inline-block;
              @media screen and (max-width: 720px) {
                width: 100%;
              }
            .start, .know-more{
                // width: 180px;
                width: 45%;
              @media screen and (max-width: 720px) {
                width: 90%;
                margin:0 0 20px 0;
              }
              &.start{
                border-color: #5BCB93;
                background:#5BCB93;
              }
              &.know-more{
                border:1px solid #5BCB93;
                color: #5BCB93;
                &:hover{
                }
              }
            }
          }
        }
      }

      .buttons{
        // width: 40%;
        padding: 80px 0;
        .start, .know-more{
          width: 240px;
          height: 40px;
          line-height: 35px;
          box-sizing: border-box;
          border: 2px solid #FBB627;
          box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
          border-radius: 44px;
          color: white;
          font-family: "Krona One", monospace;
          font-size: 14px;
        //   font-weight: bold;
          text-decoration: none;
          display: inline-block;
          margin: 0 8px;
          &.start{
            background: #FBB627;
            &:hover{
              filter: brightness(1.1);
            }
          }
          &.know-more{
            border:1px solid;
            &:hover{
              // background: rgba(239, 101, 102, .1);
              background:rgba(91, 203, 147, .1);
              // background: #EF6566;
              // border: 1px solid transparent;
            }
          }
          @media screen and (max-width: 640px) {
            width: 90%;
            margin:0;
            margin: 20px 0 60px 0;
          }
        }
      }
    }
  }

@media only screen and (min-width: 1680px) {
  .order{
    font-size: 16px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 2%;
    top: 28%;
    .r{
      font-size: 45px;
      em{
        font-size: 20px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 22px;
    }
  }
}
@media only screen and (min-width: 1570px) and (max-width: 1680px) {
  .order{
    font-size: 16px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 2%;
    top: 28%;
    .r{
      font-size: 45px;
      em{
        font-size: 20px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 22px;
    }
  }
}

@media only screen and (min-width: 1440px) and (max-width: 1570px) {
  .order{
    font-size: 14px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 3%;
    top: 36%;
    .r{
      font-size: 38px;
      em{
        font-size: 15px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 21px;
    }
  }
}

@media only screen and (max-width: 1440px) {
  .order{
    font-size: 14px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 2%;
    top: 40%;
    .r{
      font-size: 30px;
      em{
        font-size: 14px;
        font-style: normal;
      }
    }
  }
}

@media only screen and (max-width: 720px) {
  .order {
    font-size: 14px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 2%;
    top: 0;
    .r {
      font-size: 30px;
      em {
        font-size: 14px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 16px;
      margin-left: 1px;
    }
  }
}

@media only screen and (max-width: 420px) {
  .order {
    top: 4px;
    right: 1.5%;
    a {
      font-size: 16px;
      transform: translateY(-6px);
    }
    .r {
      font-size: 24px;
    }
    .btn {
      padding: 0.18em 0.6em 0.19em;
      font-size: 15px;
    }
  }
}
@media only screen and (max-width: 375px) {
  .order {
    top: 0px;
    right: 1.5%;
    a {
      font-size: 16px;
      transform: translateY(-6px);
    }
    .r {
      font-size: 18px;
    }
    .btn {
      padding: 0.12em 0.3em 0.13em;
      font-size: 15px;
      margin-left: 0;
    }
  }
}

@media only screen and (max-width: 360px) {
  .order {
    top: -1px;
    a {
      font-size: 16px;
      transform: translateY(-6px);
    }
    .r {
      font-size: 18px;
    }
    .btn {
      padding: 0.12em 0.3em 0.13em;
      font-size: 15px;
      margin-left: 0;
    }
  }
}
</style>
